import React, { Component, useContext } from 'react'
// 1.创建上下文对象
const ThemeContext = React.createContext()
const ColorContext = React.createContext()
// 配合 开发者工具查看效果
ThemeContext.displayName = 'ThemeContext'
ColorContext.displayName = 'ColorContext'
// useContext 一般使用到后代组件，可以通过它获取祖先组件传递的数据
function MyButton () {
  const theme = useContext(ThemeContext)
  const color = useContext(ColorContext)
  return (
    <button>1 - { color } - { theme }</button>
  )
}

class ToolBar extends Component {
  render () {
    return (
      <MyButton></MyButton>
    )
  }
}
export default class App extends Component {
  render() {
    return (
      <div>
        {/* 2.祖先组件传递数据
          通过上下文对象 的Provider组件完成传值，必须通过value属性传值
        */}
        <ThemeContext.Provider value="dark">
          <ColorContext.Provider value = "red">
            <ToolBar/>
          </ColorContext.Provider>
        </ThemeContext.Provider>
      </div>
    )
  }
}
